import React, { useState, useEffect } from "react";
import "./style.less";
import { getStats } from "../actions/bigscreen";
import { useSelector, useDispatch } from "react-redux";
const IPDataCenter = () => {
  const [statsData, setStatsData] = useState([]);
  const [loading, setLoading] = useState(true);
  const dispatch = useDispatch();
  useEffect(() => {
    const fetchStatsData = async () => {
      try {
        const res = await dispatch(getStats());
        console.log("API返回数据:", res); // 调试输出
        if (res.payload && res.payload.data && res.payload.data.intellectualPropertyStats) {
          setStatsData(res.payload.data.intellectualPropertyStats);
        } else {
          console.error("获取知识产权统计数据失败：数据格式不正确");
        }
      } catch (error) {
        console.error("获取知识产权统计数据失败:", error);
      } finally {
        setLoading(false);
      }
    };
    fetchStatsData();
  }, []);

  // 通过名称查找对应的数据项
  const findStatByName = (name) => {
    if (!statsData || statsData.length === 0) return { count: 0 };
    const item = statsData.find(item => item.name === name);
    return item || { count: 0 };
  };

  return (
    <div className="ip-data-center">
      <div className="center-background">
        <div className="center-top-data center-data">
          <div className="data-box">
            <div className="data-title">知识产权交底书量</div>
            <div className="data-value">{findStatByName("知识产权交底书量").count}件</div>
          </div>
        </div>
        <div className="center-right-data center-data">
          <div className="data-box">
            <div className="data-title">知识产权受理量</div>
            <div className="data-value">{findStatByName("知识产权受理量").count}件</div>
          </div>
        </div>
        <div className="center-main-data center-data">
          <div className="data-box main-data">
            <div className="data-title">知识产权总有权量</div>
            <div className="data-value big-value">
              {findStatByName("知识产权总有权量").count}件
            </div>
          </div>
        </div>

        <div className="center-data center-bottom-data">
          <div className="data-box">
            <div className="data-title">飞尚知识产权下证量</div>
            <div className="data-value">{findStatByName("飞尚知识产权下证量").count}件</div>
          </div>
          <div className="data-box right-data">
            <div className="data-title">汇派知识产权下证量</div>
            <div className="data-value">{findStatByName("汇派知识产权下证量").count}件</div>
          </div>
        </div>
      </div>
      <div className="circle-effect-container">
        <div className="circle-effect-in"></div>
        <div className="circle-effect-out"></div>
      </div>
    </div>
  );
};

export default IPDataCenter;
